<template>
  <el-card shadow="hover" class="card-order-info" :class="{'is-select-card':selectAll}">
    <div class="order-header">
      <div class="left">
        <div style="display: inline">
          <template v-if="data.orderStatus">
            <order-status-tag :order-status="data.orderStatus" :ignore="data.ignore" class="mgr10"></order-status-tag>
          </template>
          <template v-if="data.stickerStatus === 1">
            <el-tag
              type="ignore"
              effect="dark"
              class="order-status-tag"
            >
              待贴单
            </el-tag>
          </template>
          <template v-if="data.stickerStatus === 2">
            <el-tag
              type="received"
              effect="dark"
              class="order-status-tag"
            >
              已贴单
            </el-tag>
          </template>
          <template v-if="data.isExcept === 1">
            <el-tooltip  effect="dark" :content="data.exceptRemark" placement="top">
              <el-tag
                type="danger"
                effect="dark"
              >
                异常件
              </el-tag>
            </el-tooltip>

          </template>

        </div>
        <div class="order-no">

          <span style="cursor: pointer" :class="{
            'except-color': data.isExcept === 1,
          }" @click="jumpOrderInfo(data.orderId)">{{data.orderId}}</span> 丨 {{data.createdDate}}

          <div class="wuliu" v-if="data.orderStatus === 2">

            <template v-if="data.stickerOrder.deliveryNo && data.stickerOrder.express && data.stickerOrder.express.list.length > 0">
              <el-tooltip  effect="dark" :content="data.stickerOrder.express.list[0].status" placement="top">
                <div class="hidden-1 mgl10 text wuliu-text">{{data.stickerOrder.express.list[0].status}}</div>
              </el-tooltip>
            </template>
            <template v-else-if="data.stickerOrder.type === 1">
              <div class="text mgl10">暂无物流信息</div>
            </template>
            <template v-else-if="data.stickerOrder.type === 3">
              <div class="text mgl10">等待卖家发货</div>
            </template>

          </div>
        </div>

      </div>
      <div class="right">
        <div class="buyer">
          <img class="img-country-icon" :src="getCountryIcon(data.siteId)" alt="">
          {{ data.accountName }}
        </div>
      </div>
    </div>
    <div class="order-content">
      <el-table
        ref="orderItemTable"
        :data="data.orderGoods"
        :border="false"
        row-key="id"
        :tree-props="{children:'children'}"
        :show-header="false"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="showSelect"
          type="selection"
          :selectable="selectable"
          width="55">
        </el-table-column>
        <el-table-column
          prop="image"
          label="商品图片"
          width="100"
        >
          <template slot-scope="{row}">
            <div class="img-sel-box">
              <img :src="row.image" style="width: 85px;height: 85px;cursor: pointer" @click="jumpLink(row)">
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="商品信息"
          min-width="300"
        >
          <template slot-scope="{row}">
            <div class="order-goods-info">
              <div class="goods-id">{{row.goodsId}}</div>
              <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                <div class="goods-title hidden-1">
                  {{row.title}}
                </div>
              </el-tooltip>
              <div class="goods-SKU" v-if="row.sku">SKU：{{row.sku}}</div>
              <div class="goods-SKU-info" v-if="row.attributes.length > 0">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>

                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsInfo"
          label="价格"
          width="150"
        >
          <template slot-scope="{row}">
            <div class="goods-price">
              <div class="price-item">
                <span class="currency">USD</span>
                <span class="price">{{row.amount}}</span>
              </div>
              <div class="price-item">
                <span class="currency">{{getCountryCurrency(data.siteId)}}</span>
                <span class="price">{{row.currencyAmount}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量"
          width="150"
        >
          <template slot-scope="{row}">
            <div class="goods-num">
              <span class="text">数量：</span>
              <span class="num">{{row.num}}</span>
            </div>
            <div class="goods-num" v-if="row.stickerWeight > 0">
              <span class="text">重量：</span>
              <span class="num">{{row.stickerWeight}}g</span>
            </div>
            <div class="goods-num">
              <span class="text">运费：</span>
              <span class="num">USD {{row.shippingFee}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsInfo"
          label="操作"
          min-width="250"
        >
          <template slot-scope="{row}">
            <template v-if="showTag">
              <template v-if="data.stickerOrder.type === 1">
                <deliver-tag class="card-tag"></deliver-tag>
              </template>
              <template v-if="data.stickerOrder.type === 2">
                <stock-tag class="card-tag"></stock-tag>
              </template>
              <template v-if="data.stickerOrder.type === 3">
                <order1688-tag class="card-tag"></order1688-tag>
              </template>
            </template>
            <template v-else>
              <div class="line line-1">
                <el-button class="mgr10 mgb10" type="primary" @click="jumpOrderInfo(data.orderId)">查看订单</el-button>

                <template v-if="data.ignore === 0 && (data.orderStatus === 1 || data.orderStatus === 5)">
                  <ignore-order :order-ids="[data.orderId]" @changeOrder="changeOrder"></ignore-order>
                </template>

                <template v-if="data.ignore === 1 && data.orderStatus === 1">
                  <forget-ignore :order-id="data.orderId" @changeOrder="changeOrder" ></forget-ignore>
                </template>
                <!-- 查看采购单 -->
                <template v-if="data.orderStatus === 5 && data.procureNo">
                  <procure-button :procure-no="data.procureNo" :procure-type="data.procureType"></procure-button>
                </template>



              </div>

              <div class="line line-2">



                <template v-if="data.ignore === 0 && (data.orderStatus === 1 || data.orderStatus === 5)">
                  <ali1688-procure-button :order-ids="[data.orderId]" v-if="data.orderStatus === 1"></ali1688-procure-button>
                  <ali1688-button :order-ids="[data.orderId]" :order-arr="[data]" @changeOrder="changeOrder"></ali1688-button>
                  <delivery-button :order-ids="[data.orderId]" :order-arr="[data]" @changeOrder="changeOrder"></delivery-button>
                  <stock-button :order-data="[data]" :order-ids="[data.orderId]" :order-arr="[data]" @changeOrder="changeOrder"  v-if="row.stockNum > 0"></stock-button>
                </template>

                <template v-if="data.ignore === 0 && data.orderStatus === 2 && data.stickerStatus === 1">
                  <edit-order1688-button
                    v-if="data.stickerOrder.type === 3"
                    :order1688="data.stickerOrder.order1688"
                    :order-id="data.orderId"
                    @changeOrder="changeOrder"
                  ></edit-order1688-button>

                  <edit-delivery-button
                    v-if="data.stickerOrder.type === 1"
                    :order-id="data.orderId"
                    :delivery-type="data.stickerOrder.deliveryType"
                    :delivery-no="data.stickerOrder.deliveryNo"
                    :phone="data.stickerOrder.phone"
                    @changeOrder="changeOrder"
                  ></edit-delivery-button>
                  <delete-stock-order :order-id="data.orderId" v-if="data.stickerOrder.type === 2" @changeOrder="changeOrder"></delete-stock-order>

                </template>

              </div>





            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="entryTime"
          label="入仓时间"
          min-width="150"
          align="right"
        >
<!--          <template slot-scope="{row}">-->
            <template v-if="data.orderStatus === 3">

              <div>
                <el-tooltip class="item" effect="dark"
                            placement="top">
                  <div slot="content">
                    入仓时间是指用户下单到美客多扫描入仓所用的时间（小时数），国内工作日<br/>
                    如果入仓时间为0，则代表该订单的下单到入仓全过程在非工作日内完成</div>
                  <div>
                    入仓时间(小时)
                    <button class="number-button" style="display: inline-block" :class="{
                'number-button-danger': data.entryDiff > 96,
                'number-button-success': data.entryDiff <= 96,
                }">{{data.entryDiff}}</button>
                  </div>
                </el-tooltip>
              </div>
              <template v-if="data.trackingNumber">
                <el-tooltip class="item" effect="dark"
                            placement="top">
                  <div slot="content">
                    国际物流商：{{data.trackingMethod}}<br/>
                    国际物流单号：{{data.trackingNumber}}</div>
                  <div class="hidden-1">
                    {{ data.trackingNumber }}
                  </div>
                </el-tooltip>
              </template>

            </template>

<!--          </template>-->

        </el-table-column>
      </el-table>
    </div>

  </el-card>
</template>

<script>

import {getCountryCurrency, getCountryIcon} from "@/utils/common";
import EditDeliveryButton from "@/views/order/components/EditDeliveryButton";
import DeliveryButton from "@/views/order/components/DeliveryButton";
import StockButton from "@/views/order/components/StockButton";
import OrderStatusTag from "@/views/order/components/OrderStatusTag";
import {deleteStickerOrder, forgetIgnore} from "@/api/order";
import DeliverTag from "@/components/Tag/DeliverTag";
import StockTag from "@/components/Tag/StockTag";
import ForgetIgnore from "@/views/order/components/ForgetIgnore.vue";

import Ali1688Button from "@/views/order/components/Ali1688Button";
import EditOrder1688Button from "@/views/order/components/EditOrder1688Button";
import order1688Tag from "@/components/Tag/Order1688Tag";
import Ali1688ProcureButton from "@/views/order/components/Ali1688ProcureButton";
import ProcureButton from "@/views/order/components/ProcureButton.vue";


export default {
  name: "OrderItem",
  props:{
    data:{
      type: Object,
      required: true,
    },
    selectOrderId:{
      type:Array,
    },
    showTag:{
      type: Boolean,
      default: false,
    },
    showSelect:{
      type: Boolean,
      default: true,
    }
  },
  watch:{
    selectOrderId:function (newValue){
      let check = false; // 用于判断有没有选择
      newValue.some(orderId =>{
        if(orderId === this.data.orderId){
          check = true;
          this.$refs.orderItemTable.toggleRowSelection(this.data.orderGoods[0],true);
          return true;
        }
      })
      // 当前选择没有 取消选择
      if(!check){
        this.$refs.orderItemTable.toggleRowSelection(this.data.orderGoods[0],false);
      }
    },
  },
  components:{
    ProcureButton,
    order1688Tag,
    EditOrder1688Button,
    Ali1688Button,
    ForgetIgnore,
    EditDeliveryButton,
    OrderStatusTag,
    StockButton,
    DeliveryButton,
    StockTag,
    DeliverTag,
    Ali1688ProcureButton
  },
  data(){
    return {
      getCountryIcon,
      isExpand: false,
      selectAll: false, // 是否全选
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getCountryCurrency,
    expand(e){
      this.isExpand = !this.isExpand;
    },
    getData(){

    },
    handleSelectionChange(val){
      this.selectAll = val.length !== 0
      this.$emit('change',this.data,this.selectAll )
    },
    changeOrder(){
      this.$emit('changeOrder',true)
    },
    forgetIgnore() {
      this.$confirm('', '确定重新提醒该订单吗？', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonClass: '取消'
      })
        .then(res=>{
          forgetIgnore(this.data.orderId)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                this.changeOrder()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(res=>{
          // 点击了取消
        });
    },
    // 判断是否能选择
    selectable(){
      return (this.data.orderStatus === 1 || this.data.orderStatus === 5) && this.data.ignore === 0;
    },
    jumpOrderInfo(orderId){
      if(this.$route.name === 'orderInfo'){
        return;
      }
      const { href } = this.$router.resolve({
        name: 'orderInfo',
        query: {
          orderId
        }
      })
      window.open(href,'_blank')
    },
    // 删除库存使用
    deleteStock(){
      this.$confirm('删除后订单将重新变为未处理状态，请重新处理', '确认删除当前库存的使用？', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonClass: '取消'
      })
        .then(res=>{
          deleteStickerOrder(this.data.orderId)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                this.changeOrder()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(res=>{
          // 点击了取消
        });
    },
    // 跳转到对应的商品页面
    jumpLink(row){
      if(row.link){
        window.open(row.link,'_blank')
      }
    },
  }
}
</script>

<style lang="scss">
.order-content{
  table th,
  table td {
    border-bottom: none !important;
  }
  //去掉最下面的那一条线
  .el-table::before {
    height: 0;
  }
  .el-table tbody tr:hover>td{
    background: #ffffff !important;
  }
}
</style>

<style scoped lang="scss">

.card-order-info{
  margin-bottom: 20px;
  .order-header{

    font-size: 13px;
    display: flex;
    justify-content: space-between;

    .order-no{
      display: inline-block;
      font-weight: bold;
      margin-left: 20px;
    }
    .wuliu{
      display: inline-block;
      font-weight: bold;

      .text{
        width: 500px;
        height: 16px;
        color: #1890ff;
        font-weight: normal;
      }
      .wuliu-text{
        position: relative;
        top: 4px;
      }
      //margin-left: 20px;
    }
  }
}
.order-content{
  .order-goods-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    .goods-id{
      font-weight: 650;
      font-style: normal;
      font-size: 13px;
      color: #555555;
    }
    .goods-title{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #AAAAAA;
    }
    .goods-SKU{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #555555;
    }
    .goods-SKU-info{
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      color: #7F7F7F;
      span:last-of-type .attr-link{
        display: none;
      }
    }

  }
  .goods-price{
    .price-item{
      margin-bottom: 3px;
      font-size: 13px;
      .currency{
        font-weight: 500;
        font-style: normal;
        color: #AAAAAA;
        margin-right: 10px;
      }
      .price{
        color: #009C46;
        font-weight: 500;
        font-style: normal;
      }
    }
  }
  .goods-num{
    font-size: 13px;
    .text{
      color: #AAAAAA;
      font-weight: 500;
      font-style: normal;
    }
    .num{
      color: #FC6347;
      font-weight: 500;
      font-style: normal;
    }
  }
}
.is-select-card{
  border: #0099ff 1px solid;
}
.except-color{
  color: #ff4949;
}
</style>
